// const { src, dest } = require('gulp') // api
// const cleanCss = require('gulp-clean-css') // 压缩插件
// const rename = require('gulp-rename')

// function defaultTask() {
//   return src('src/*.css')
//   .pipe(cleanCss())
//   .pipe(rename({ extname: '.min.css'}))
//   .pipe(dest('dist'))
// }
// exports.default = defaultTask

// 样式, 脚本, 页面模板编译, 图片字体文件压缩
const { src, dest, parallel, series, watch} = require('gulp')

// 自动加载插件
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins() // 是一个对象 使用 plugins.sass  如有gulp-a-baa 则名字转为驼峰命名法, 使用 plugins.aBaa

// 以下为手动引用插件方式, 被上面自动加载插件替换
// const sass = require('gulp-sass') // sass
// const babel = require('gulp-babel') // babel es6转换
// const swig = require('gulp-swig') // HTML转换
// const imagemin = require('gulp-imagemin') // 图片字体压缩转换

// useref 文件引用处理

const del = require('del') // yarn add del 

// 开发服务器
const browserSync = require('browser-sync')
const bs = browserSync.create()
const data = [{
  menus: [],
  pkg: require('./package.json')
}]

// 删除清空dist文件
const clean = () => {
  return del(['dist', 'temp'])
}

// 样式编译 { base: 'src'}为基准目录, 编译后会把目录路径一起编译出来
const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src'})
  .pipe(plugins.sass({outputStyle: 'expanded'})) // {outputStyle: 'expanded'} 展开{}
  .pipe(dest('temp')) // 目标目录
  .pipe(bs.reload({ stream: true })) // 以文件流方式刷新编译
}

// 脚本编译
const script = () => {
  return src('src/assets/*.js', { base: 'src'})
  .pipe(plugins.babel({presets: ['@babel/preset-env']})) // {outputStyle: 'expanded'} 展开{}
  .pipe(dest('temp')) // 目标目录
}

// 页面模板编译
const page = () => {
  return src('src/*/**.html', { base: 'src'})
  .pipe(plugins.swig({data})) // {data} // 替换数据
  .pipe(dest('temp')) // 目标目录
}

// 图片字体编译
const image = () => {
  return src('src/assets/images/**', { base: 'src'})
  .pipe(plugins.imagemin()) // 图片压缩
  .pipe(dest('dist')) // 目标目录
}
// 字体压缩
const font = () => {
  return src('src/assets/fonts/**', { base: 'src'})
  .pipe(plugins.imagemin()) // 图片压缩
  .pipe(dest('dist')) // 目标目录
}

// 其他文件复制
const extra = () => {
  return src('public/**', {base: 'public'})
  .pipe(dest('dist'))
}

// 开发服务器
const serve = () => {
  // watch 监测文件改变, 同步编译
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/*.js', script)
  watch('src/*/**.html', page)
  // watch('src/assets/images/**', image)
  // watch('src/assets/fonts/**', font)
  // watch('public/**', extra)
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload) // 字体,图片,public改变,刷新
  bs.init({
    notify: false, // 是否隐藏提示
    port: 2080, // 端口
    // open: false, // 是否开启自动打开服务器
    files: 'dist/**', // 哪些文件修改后刷新服务器
    server: {
      // baseDir: 'dist',
      baseDir: ['temp', 'src', 'public'],
      routers: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// useref 文件引用处理
const useref = () => {
  return src('temp/*.html', { base: 'dist' })
  .pipe(plugins.useref({ searchPath: ['dist', '.']}))
  // html js css 压缩 
  // gulp-if(判断插件) htmlmin(html压缩插件) uglify(js压缩插件) cleanCss
  // HTML默认压缩空格, collapseWhitesspace 折叠空白
  .pipe(plugins.if(/\.js$/, plugins.uglify()))
  .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
  .pipe(plugins.if(/\.html$/, plugins.htmlmin({
    collapseWhitesspace: true,
    minifyCSS: true,
    minifyJS: true
  })))
  .pipe(dest('dist'))
}

// parallel异步任务
const compile = parallel(style, script, page)

// series同步任务, 先清除老的dist文件, 再编译新的文件
// 上线时再build
const build = series(
  clean, 
  parallel(
    series(compile, useref), 
    image,
    font,
    extra
  )
)

// 开发编译
const develop = series(compile, serve)

module.exports = {
  clean,
  compile,
  build,
  serve,
  useref
}

